import React, { useMemo, useEffect, useState, useContext } from 'react'
import PropTypes from 'prop-types';
import ThemeContext from './ThemeContext';

export default function VoteMain() {
    const store = useContext(ThemeContext)
    let { supNum, oppNum } = store.getState();

    let ratio = useMemo(() => {
        let total = supNum + oppNum;
        return total > 0 ? (supNum / total * 100).toFixed(2) + '%' : '--';
    }, [supNum, oppNum])

    let [num, setNum] = useState(0);
    useEffect(() => {
        const unsubscribe = store.subscribe(() => {
            setNum(num + 1);
        });
    }, []);

    return (
        <div className="main">
            <p>支持人数：{supNum}人</p>
            <p>反对人数：{oppNum}人</p>
            <p>支持比率：{ratio}</p>
        </div>
    )
}
VoteMain.propTypes = {
    supNum: PropTypes.number,
    oppNum: PropTypes.number
};